<!--
 * @Description: {{ByRuin}}
 * @Version: 2.0
 * @Author: Ruin 🍭
 * @Date: 2021-12-28 10:32:21
 * @LastEditors: 刘引
 * @LastEditTime: 2022-01-04 16:51:59
-->
<template>
  <div class="banner">
    <div class="block">
      <el-carousel height="500px" v-if="this.$store.state.isChange == false">
        <!-- zh -->
        <el-carousel-item>
          <div class="w">
            <h3 class="banner02">全球买卖</h3>
            <h4>为您解决元器件报价、采购问题</h4>
            <p style=" font-style: normal; font-size: 16px;">
              12年行业口碑，3亿人民币的现货库存,积累全球
              <br />2500家元器件供应商
            </p>
            <p class="flex">
              <span :data-clipboard-text="copyText" class="qq">
                <a href="tencent://message/?uin=2355608068&Site=Sambow&Menu=yes">QQ询价</a>
              </span>
              <span @click="jumpSubmit">网络电邮询价</span>
            </p>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <h3 class="banner01">新功率半导体代理商</h3>
          <p style=" font-style: normal;">及时出价&nbsp;快速出货</p>
          <p class="flex">
            <span :data-clipboard-text="copyText" class="qq">
              <a href="tencent://message/?uin=2355608068&Site=Sambow&Menu=yes">QQ询价</a>
            </span>
            <span @click="jumpSubmit">网络电邮询价</span>
          </p>
        </el-carousel-item>
      </el-carousel>

      <el-carousel height="500px" v-if="this.$store.state.isChange">
        <el-carousel-item>
          <div class="w">
            <h3
              class="banner02"
              style="font-size: 28px;"
            >The chip trading market is all over the world</h3>
            <h4
              style="font-size:14px;margin-top: 10px;"
            >Provide you with a full range of services such as component quotation and procurement</h4>
            <p style=" font-style: normal; font-size: 16px; width: 600px;">
              12 years of industry reputation ,300 million RMB worth of online
              inventory ,more than 2500 component supplier resources all over the world ,Can quickly and effectively solve your urgent and low-cost procurement needs
            </p>
            <p class="flex">
              <span :data-clipboard-text="copyText" class="qq">
                <a href="tencent://message/?uin=2355608068&Site=Sambow&Menu=yes">RFQ by QQ</a>
              </span>
              <span @click="jumpSubmit">RFQ by E-mail</span>
            </p>
          </div>
        </el-carousel-item>

        <el-carousel-item>
          <h3 class="banner01">Semiconductor Agent</h3>
          <p style=" font-style: normal;">quotation in time and fast shipping</p>
          <p class="flex">
            <span :data-clipboard-text="copyText" class="qq">
              <a href="tencent://message/?uin=2355608068&Site=Sambow&Menu=yes">RFQ by QQ</a>
            </span>
            <span @click="jumpSubmit">RFQ by E-mail</span>
          </p>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script lang="ts">
import Clipboard from 'clipboard';
export default {
  data() {
    return {
      info: [
        {
          id: 0,
          message: "xin"
        },
        {
          id: 1,
          message: "hao"
        }
      ],
      copyText: "2355608068"
    }
  },
  methods: {
    jumpSubmit() {
      // @ts-ignore
      this.$router.push({ path: '/submit?#location' })
    },
    showQQ() {
      // @ts-ignore
      if (this.$store.state.isChange) {
        ElMessageBox.alert('2355608068', 'QQ Contact', {
          confirmButtonText: 'copy',
          // @ts-ignore

          callback: (action: Action) => {

            // @ts-ignore
            ElMessage({
              type: 'success',
              message: `copy success！`,
            })
            // @ts-ignore
            this.copyQQ();
          },
        })
      } else {
        ElMessageBox.alert('2355608068', 'QQ联系方式', {
          confirmButtonText: '复制',
          // @ts-ignore

          callback: (action: Action) => {

            // @ts-ignore
            ElMessage({
              type: 'success',
              message: `复制成功！`,
            })
            // @ts-ignore
            this.copyQQ();
          },
        })

      }

    },
    copyQQ() {
      // @ts-ignore
      let clipboard = new Clipboard(".qq");
      // @ts-ignore
      clipboard.on("success", e => {
        // @ts-ignore
        clipboard.destroy();
      });


    }
  }
}
</script>
<style lang="scss" scoped>
.block {
  margin: 0 auto;
}
.el-carousel__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .banner01 {
    font-size: 72px;
    font-weight: normal;
    font-style: italic;
    font-stretch: normal;
    letter-spacing: 7px;
    color: #ffffff;
    &:before {
      content: "—";
      font-size: 40px;
      font-style: normal;
    }
    &:after {
      content: "—";
      font-size: 40px;
      font-style: normal;
    }
  }
  p {
    font-size: 30px;
    font-weight: normal;
    font-style: italic;
    font-stretch: normal;
    letter-spacing: 3px;
    color: #ffffff;
    margin-top: 37px;
    span {
      text-align: center;
      line-height: 42px;
      width: 188px;
      height: 42px;
      font-family: SourceHanSansCN-Regular;
      font-size: 15px;
      display: block;
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      cursor: pointer;

      &:nth-child(1) {
        border: solid 1px #efefef;
        letter-spacing: 2px;
        margin: 0 10px;
        color: #efefef;
        &:hover {
          transition: all 0.2s;
          background-color: #ffffff;
          a {
            color: #123e80;
            width: 188px;
            height: 42px;
            display: block;
          }
        }
      }
      &:nth-child(2) {
        margin: 0 10px;
        background-color: #ffffff;
        border: solid 1px #ffffff;
        color: #123e80;
        letter-spacing: 2px;
        &:hover {
          transition: all 0.2s;
          background-color: #449ae8;
          color: #ffffff;
        }
      }
    }
  }
}
.el-carousel__item:nth-child(2n) {
  background-image: url("../assets/img/common/banner01.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-size: 100vw 500px;
  // cursor: pointer;
}

.el-carousel__item:nth-child(2n + 1) {
  background-image: url("../assets/img/common/banner02.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-size: 100vw 500px;

  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 100px;
  // width: 1200px;
  // margin: 0 auto;
  // align-items: center;
  // justify-content: left;

  h4 {
    font-size: 42px;
  }
  h3 {
    font-size: 42px;
  }
  p {
    span {
      &:nth-child(1) {
        margin-left: 0;
      }
    }
  }
}

.flex {
  display: flex;
}
</style>